@props([
    'item' => null,
    'columns' => [],
    'level' => 0,
])

@php
    $hasChildren = $item->children && $item->children->isNotEmpty();
    $itemId = 'tree-item-' . $item->id;
@endphp

<div
        x-data="{ expanded: false }"
        x-on:expand-all.window="expanded = true"
        x-on:collapse-all.window="expanded = false"
        class="border-gray-100 dark:border-gray-700"
        xmlns:x-filament-actions="http://www.w3.org/1999/html">
    <div
        class="grid grid-cols-12 md:grid-cols-16 gap-4 px-4 py-4"
        id="{{ $itemId }}"
    >
        @foreach($columns as $index => $column)
            <div class="{{ $column['class'] ?? 'col-span-3' }} {{ $column['name'] == 'created_at' ? 'hidden md:block': ''   }} text-sm">
                @if($index === 0)
                    <div class="flex items-center">
                        <div class="flex items-center" style="margin-left: {{ $level * 10 }}px;">
                            @if($hasChildren)
                                <button @click="expanded = !expanded" class="mr-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                    <svg x-show="!expanded" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                    <svg x-show="expanded" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                            @else
                                <span class="mr-6"></span>
                            @endif

                            @if(isset($column['callback']))
                                {!! $column['callback']($item) !!}
                            @else
                                {{ data_get($item, $column['name']) }}
                            @endif
                        </div>
                    </div>
                @else
                    @if(isset($column['callback']))
                        {!! $column['callback']($item) !!}
                    @else
                        {{ data_get($item, $column['name']) }}
                    @endif
                @endif
            </div>
        @endforeach

        <!-- 操作列 -->
        <div class="col-span-4 text-right">
            <div class="flex justify-end space-x-3">
                <x-filament::link icon="heroicon-m-pencil-square" size="sm" wire:click="mountAction('edit', { id: {{ $item->id }} })">
                    编辑
                </x-filament::link>
                <x-filament::link icon="heroicon-m-trash" color="danger" size="sm" wire:click="mountAction('delete', { id: {{ $item->id }} })">
                    删除
                </x-filament::link>
            </div>
        </div>
    </div>

    <!-- 子节点 -->
    @if($hasChildren)
        <div x-show="expanded" x-collapse class="border-t border-gray-100 dark:border-gray-700">
            @foreach($item->children as $child)
                <x-resources.tree-table :item="$child" :columns="$columns" :level="$level + 1"
                />
            @endforeach
        </div>
    @endif
</div>


